<template>
    <div>
        <times></times>
        <el-row class="tac">
            <el-col :span="24">
                <el-menu mode="vertical" :default-openeds="['order_manage']" :unique-opened="true" :router="true"
                         @select="handleselect" @open="handleopen" @close="handleclose">
                    <template v-for="menu in menus">
                        <el-submenu :index="menu.index">
                            <template slot="title"><i :class="menu.icon"></i>{{menu.name}}</template>
                            <template v-for="child in menu.children">
                                <el-menu-item :index="child.index"><i :class="child.icon"></i>{{child.name}}</el-menu-item>
                            </template>
                        </el-submenu>
                    </template>
                    <!--<el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>用户管理</template>
                        <el-menu-item index="user">用户列表</el-menu-item>
                        <el-menu-item index="user_role">用户角色</el-menu-item>
                        <el-menu-item index="role_auth">角色权限</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-message"></i>测试</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="3"><i class="el-icon-menu"></i>导航三</el-menu-item>
                    <el-menu-item index="4"><i class="el-icon-setting"></i>导航四</el-menu-item>-->
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Times from '../common/times.vue';

    export default {
        data () {
            return {
                msg: '欢迎登录',
                menus: []
            }
        },
        components: {
            Times
        },
        methods: {
            handleselect: function (index, indexPath) {
                console.info(index);
                console.info(indexPath);
            },
            handleopen: function (index, indexPath) {
                console.info(index);
                console.info(indexPath);
            },
            handleclose: function (index, indexPath) {
                console.info(index);
                console.info(indexPath);
            }
        },
        mounted(){
            this.$http.get('/admin/menu/index').then((response) => {
                if (response.ok) {
                    this.menus = response.data.data;
                } else {
                    console.error(response);
                }
            }, (response) => {
                console.error(response);
            });
        }
    }
</script>
